<template>
	<view>
		<!--头部-->
		<view class="user_info">
			<!--邀请码-->
			<view class="invite" @click="clipboardData(userOrderInfo.invitationCode)">
				<text>邀请码: {{userOrderInfo.invitationCode}}</text>
				<view class="bg_img">
					<img src="../../static/fuzhi.png" />
				</view>
			</view>
			<!--张-用户信息-->
			<view class="users">
				<view class="users_left">
					<text>{{firstName}}</text>
				</view>
				<view class="users_right">
					<view class="users_rightUp"><text>{{userOrderInfo.userName}}({{userOrderInfo.phone}})</text></view>
					<view class="users_rightDown"><text>店铺：{{userOrderInfo.storeName}}</text></view>
				</view>
			</view>
			<!--提现奖金-->
			<view class="users_money">
				<view class="users_moneyLeft" @click="WithDraw_Money('/pages/money/withDraw')">
					<view><text>{{userOrderInfo.promotionBonus}}</text></view>
					<view><text>可提现奖金(元)</text></view>
				</view>
				<view class="users_moneyRight" @click="WithDraw_Money('/pages/money/withdrawInfo')">
					<view><text>{{userOrderInfo.withdrawalDetails}}</text></view>
					<view><text>已提现奖金(元)</text></view>
				</view>
			</view>
		</view>

		<!--中部-->
		<view class="money_mode">
			<view class="mode_item">
				<view class="mode_itemLeft" @click="moneyClick('/pages/money/commission')">
					<view>
						<image src="../../static/6dd3eb68.png" mode="widthFix"></image>
					</view>
					<view class="Moneyfont_tyle">
						<text class="mr_text">推广奖金</text><br>
						<text class="red_text">{{userOrderInfo.promotionBonus}}元</text>
					</view>
				</view>

				<view class="mode_itemRight" @click="moneyClick('/pages/money/tgOrder')">
					<view>
						<image src="../../static/huangj12.png" mode="widthFix"></image>
					</view>
					<view class="Moneyfont_tyle">
						<text class="mr_text">推广订单</text><br>
						<text class="red_text">{{userOrderInfo.promotionOrderAmount}}元</text>
					</view>
				</view>
			</view>
			<view class="mode_item">
				<view class="mode_itemLeft" @click="moneyClick('/pages/money/withdrawInfo')">
					<view>
						<image src="../../static/shac12.png" mode="widthFix"></image>
					</view>
					<view class="Moneyfont_tyle">
						<text class="mr_text">提现明细</text><br>
						<text class="red_text">{{userOrderInfo.withdrawalDetails}}元</text>
					</view>
				</view>
				<view class="mode_itemRight" @click="moneyClick('/pages/money/fansInfo')">
					<view>
						<image src="../../static/userxin.png" mode="widthFix"></image>
					</view>
					<view class="Moneyfont_tyle">
						<text class="mr_text">我的粉丝</text><br>
						<text class="red_text">{{userOrderInfo.fansNumber}}</text>
					</view>
				</view>
			</view>
		</view>

		<!--底部-->
		<view class="money">
			<view class="money_action">
				<view class="mode_itemLeft" @click="moneyClick('/pages/money/resultOrder')">
					<view>
						<image src="../../static/action01.png" mode="widthFix"></image>
					</view>
					<view class="Moneyfont_tyle action_jltop">
						<text class="mr_text">业务统计</text><br>
					</view>
				</view>
			</view>
			<view class="money_action">
				<view class="mode_itemLeft" @click="moneyClick('/pages/money/commission')">
					<view>
						<image src="../../static/action02.png" mode="widthFix"></image>
					</view>
					<view class="Moneyfont_tyle action_jltop">
						<text class="mr_text">奖金明细</text><br>
					</view>
				</view>
			</view>
			<view class="money_action" v-if="userOrderInfo.storeManager ==1">
				<view class="mode_itemLeft" @click="moneyClick('/pages/money/manage/manage_index')">
					<view>
						<image src="../../static/action03.png" mode="widthFix"></image>
					</view>
					<view class="Moneyfont_tyle action_jltop">
						<text class="mr_text">店操作台</text><br>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		orderInfo
	} from '@/request/api/order'
	export default {
		data() {
			return {
				firstName:'',
				userOrderInfo: {
					userName: '', //用户名
					storeName: '', //店铺名称
					invitationCode: '', //邀请码
					phone: '', //用户手机号码
					promotionBonus: '0.00', //推广奖金金额
					promotionOrderAmount: '0.00', //推广订单金额
					withdrawalDetails: '0.00', //提现明细金额
					myFansPrice: '0.00', //我的粉丝
					storeManager: 0, //0:普通用户，不展示店操作台;1.店长，展示店操作台
				}
			}
		},
		onShow() {
			orderInfo().then((res) => {
				this.userOrderInfo = res.data
				if(this.userOrderInfo.userName&&this.userOrderInfo.userName.length>0){
					this.firstName = this.userOrderInfo.userName.substring(0,1)
				}
			})
		},

		methods: {
			moneyClick(lj) {
				uni.navigateTo({
					url: lj
				})
			},
			WithDraw_Money(id) {
				uni.navigateTo({
					"url": id
				})
			},
			clipboardData(data) {
				uni.setClipboardData({
					data: data, // 设置要复制的文本内容
					success(res) {
						uni.showToast({
							title: '复制成功'
						})
					},
					fail(err) {
						uni.showToast({
							title: '复制失败'
						})
					}
				});
			}
		}

	}
</script>

<style scoped>
	.user_info {
		background-color: #2866f9;
		border-radius: 10px;
		padding-top: 26px;
		padding-bottom: 15px;
		background-size: 100% 100%;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	.invite {
		position: absolute;
		right: 0;
		top: 10px;
		height: 24px;
		background-color: #729cff;
		font-size: 14px;
		font-weight: 400;
		color: #fff;
		line-height: 24px;
		display: flex;
		align-items: center;
		flex-direction: row;
		border-radius: 10px 0 0 10px;
		padding: 0px 10px;
		margin-right: 10px;
	}

	.invite .bg_img img {
		width: 20px;
		height: 20px;
		padding: 2px 0px 0px 5px;
	}

	.users {
		display: flex;
		flex-direction: row;
		margin-left: 10px;
	}
	.users_left {
		width: 62px;
		height: 62px;
		border-radius: 50%;
		border: 3px solid #fff;
	}

	.users_left text {
		text-align: center;
		font-size: 30px;
		color: white;
		line-height: 62px;
		display: block;
	}

	.users_right {
		margin-top: 10px;
		margin-left: 10px;
	}

	.users_right text {
		font-size: 15px;
		font-weight: 700;
		color: #fff;
	}

	.users_money {
		margin-top: 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.users_moneyLeft,
	.users_moneyRight {
		width: 50%;
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	.users_money text {
		font-size: 15px;
		font-weight: 700;
		color: #fff;
	}

	//中部
	.money_mode,
	.money_action {
		margin-top: 20px;
		box-shadow: 0 0 10px hsla(0, 0%, 78.4%, .5);
		background: #fff;
		border-radius: 5px;
	}

	.money_mode image,
	.money_action image {
		width: 36px;
	}

	.mode_item {
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.mode_itemLeft,
	.mode_itemRight {
		width: 50%;
		display: flex;
		flex-direction: row;
		text-align: center;
		margin-left: 20px;
		cursor: pointer;
	}

	.Moneyfont_tyle {
		padding-left: 10px;
	}

	.mr_text {
		font-size: 15px;
	}

	.red_text {
		color: #e95555;
		font-size: 14px;
		font-weight: 700;
	}

	//底部
	.money {
		margin-top: 15px;
	}

	.money_action {
		margin-top: 10px;
		box-shadow: 0 0 10px hsla(0, 0%, 78.4%, .5);
		background: #fff;
		border-radius: 5px;
		padding: 10px 0px;
	}

	.action_jltop {
		padding-top: 10px;
	}
</style>